<%@ page contentType="text/html;charset=UTF-8" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>
	<title>预约登记管理</title>
	<meta name="decorator" content="default"/>
	<style type="text/css">
		textarea{
			resize: none;
			height: 8em !important; 
			max-height: 8em !important; 
		}
	</style>
	<link href="${ctxStatic}/mobiscroll/css/mobiscroll.custom-2.6.2.min.css" type="text/css" rel="stylesheet" />
	<script src="${ctxStatic}/mobiscroll/js/mobiscroll.custom-2.6.2.min.js" type="text/javascript"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			$(".customerLi").click(function(){
				var item = $(this);
				$("#memberName").val(item[0].name);
				$("#memberMobile").val(item[0].title);
				$("#memberId").val(item[0].id);
				$("#cancelBtn").click();
			});
			$("#name").focus();
			$("#inputForm").validate({
				submitHandler: function(form){
					var reserve = "";
					if(global.isMobile()) {
						if (global.isIpad()){
							reserve = $("#reserveIpadDT").val();
							if (!reserve) {
								showTip("请填写客户到店时间！");
								return;
							}
						} else {
							var date = $("#reserveD").val();
							var time = $("#reserveT").val();
							if (!date) {
								showTip("请填写客户到店日期！");
								return;
							}
							if (!time) {
								showTip("请填写客户到店时间！");
								return;
							}
							reserve = date + " " + time;
						}
					} else {
						reserve = $("#reserveDT").val();
						if (!reserve) {
							showTip("请填写客户到店时间！");
							return;
						}
					}
					var reserveTime = new Date(reserve.replace(/-/g, "/"));
					var now = new Date();
					if (reserveTime < now) {
						showTip("到店时间需要在当前时间之后！");
						return;
					}
					$("#reserveTime").val(reserve);
					loading('正在提交，请稍等...');
					form.submit();
				},
				rules:{
	                "customerMobile": {
						isMobile: "#customerMobile"
	                }
	            },
				errorContainer: "#messageBox",
				errorPlacement: function(error, element) {
					$("#messageBox").text("输入有误，请先更正。");
					if (element.is(":checkbox")||element.is(":radio")){
						error.appendTo(element.parent().parent());
					} else {
						error.insertAfter(element);
					}
				},
				messages: {
					customerMobile:"手机号码格式有误！"
				}
			});
			$( "#member" ).click(function(){
				$("#customerName").val("");
				$("#customerMobile").val("");
			});
			$( "#customer" ).click(function(){
				$("#memberId").val("");
				$("#memberName").val("");
				$("#memberMobile").val("");
			});
			$(".pc").hide();
			$(".mobile").hide();
			$(".ipad").hide();
			if(global.isMobile()) {
				if (global.isIpad()){
					$(".ipad").show();
				} else {
					$(".mobile").show();
				}
			} else {
				$(".pc").show();
			} 

		});
		function selectMember(){
			var fun = function(obj){
				$("#memberId").val(obj.id);
				$("#memberName").val($(obj).attr("name"));
				$("#memberMobile").val($(obj).attr("mobile"));
			};
			var existId = $("#memberId").val();
			global.singleSelectDialog("${ctx}/base/customer/customerData", "选择会员", existId ,fun);
		}

		//日期时间选择控件
		function openDateTimePicker(id){
			var opt = {
					theme: 'sense-ui', //皮肤样式
					display: 'bubble', //显示方式 
					mode: 'clickpick', //日期选择模式
					dateFormat: 'yy-mm-dd', // 日期格式
					timeFormat:'HH:ii:ss', 
					setText: '确定', //确认按钮名称
					cancelText: '取消',//取消按钮名称
					dateOrder: 'yymd', //面板中日期排列格式
					timeWheels :'HHiiss',
					dayText: '日', monthText: '月', yearText: '年', //面板中年月日文字
					hourText:'时',minuteText:'分',secText:'秒',//面板中的时分文字
					startYear:1900, //开始年份
					endYear:2050 //结束年份
			};
			$('#'+id).mobiscroll().datetime(opt).mobiscroll('show');    
		}
	</script>
</head>
<body>
	<form:form id="inputForm" modelAttribute="storeReserve" action="${ctx}/cash/storeReserve/save" method="post" class="form-input">
		<form:hidden path="id"/>
		<form:hidden path="store.id" value="${fns:getStore().id}"/>
		<form:hidden path="requestTime"/>
		<form:hidden path="smsNotified" value="0"/>
		<input type="hidden" id="memberId" name="memberId">
		<input type="hidden" id="reserveTime" name="reserveTime">
		<tags:message content="${message}"/>
		<div data-role="fieldcontain">
			<label for="requestTime">登记时间:</label>
			<input type="text" id="requestTime" name="requestTime" readonly="readonly" value="${fns:formatDate(currentDateTime, 'yyyy-MM-dd HH:mm:ss')}"/>
		</div>
		<div class="pc" data-role="fieldcontain">
			<label for="reserveTime">来店时间:</label>
			<input id="reserveDT"  type="text" onclick="openDateTimePicker(this.id)"/>
		</div>
		<div class="ipad" data-role="fieldcontain">
			<label for="reserveTime">来店时间:</label>
			<input id="reserveIpadDT"  type="datetime"/>
		</div>
		<div class="mobile" data-role="fieldcontain">
			<label for="reserveD">来店日期:</label>
			<input id="reserveD" type="date"/>
		</div>
		<div class="mobile" data-role="fieldcontain">
			<label for="reserveT">来店时间:</label>
			<input id="reserveT" type="time"/>
		</div>
		<div data-role="fieldcontain">
			<label for="employee.id" class="select">预约美容师:</label>
			<form:select path="employee.id" data-native-menu="false" items="${employeeList}" itemLabel="name" itemValue="id"></form:select>
		</div>
		<div data-role="fieldcontain">
			<label for="reserveMan" class="select">预约人:</label>
			<div id="reserveMan" data-role="collapsible-set">
			    <div data-role="collapsible" data-collapsed="${not empty isMember ? 'false':'true'}">
			        <h3  id="member" >会员预约</h3>
			        <input type="button" data-inline="true" onclick="selectMember()" value="选择会员">
				    <div data-role="fieldcontain">
						<label for="memberName">姓名:</label>
						<input id="memberName" type="text" readonly="readonly" value="${storeReserve.member.name}"/>
					</div>  
				    <div data-role="fieldcontain">
						<label for="memberMobile">手机:</label>
						<input id="memberMobile" type="text" readonly="readonly" value="${storeReserve.member.mobile}"/>
					</div>  
			    </div>
			    <div data-role="collapsible" data-collapsed="${empty isMember ? 'false':'true'}">
			        <h3 id="customer">散客预约</h3>
				    <div data-role="fieldcontain">
						<label for="customerName">姓名:</label>
						<form:input path="customerName" htmlEscape="false" maxlength="16" class="required"/>
					</div>  
				    <div data-role="fieldcontain">
						<label for="customerMobile">手机:</label>
						<form:input path="customerMobile" htmlEscape="false" maxlength="16" class="required"/>
					</div>  
				</div>
			</div>
		</div>
		<div data-role="fieldcontain">
			<label for="reason">预约内容:</label>
			<textarea id="reason" name="reason" rows="5" cols="50" maxlength="128">${storeReserve.reason}</textarea>
		</div>
		<div class="icon-buttons">
			<a href="${ctx}/cash/storeReserve/" data-icon="back" data-iconpos="notext" data-role="button" data-inline="true">返回</a>
			<input data-inline="true" data-icon="check" data-iconpos="notext" type="submit" value="保存"/>
		</div>
	</form:form>
</body>
</html>
